// DOM 事件的分级
// 0 1 2 级事件
// window.addEventListener('DOMContentLoaded', () => {

// })
const formDom = document.querySelector('#form')

// 0 级事件， 缺点, 单例
// formDom.onclick = function (e) {
//   console.log('0级事件')
// }

// formDom.onclick = function (e) {
//   console.log('0级事件2')
// }

// formDom.onsubmit = function (event) {
//   console.log('event', event)
//   // 阻止了浏览器的默认行为
//   event.preventDefault()
//   console.log('0级事件')
// }

// 1 级事件，事件系统
// 注册事件的操作，事件池
formDom.addEventListener('submit', (event) => {
  event.preventDefault()
  console.log('event', event)
  // eventHandler.trigger('click')
})

formDom.addEventListener('submit', (event) => {
  console.log('event2', event)
})

formDom.addEventListener('submit', (event) => {
  console.log('event3', event)
})

// 这个就是 DOM 的事件系统
class EventHandler {
  events = []   //事件池

  addEventListener (type, callback) {
    this.events.push({
      type,
      callback
    })
  }

  trigger (type) {
    this.events.forEach(item => {
      if (item.type === type) {
        item.callback()
      }
    })
  }
}

const eventHandler = new EventHandler()
eventHandler.addEventListener('click', () => {
  console.log('click')
})
eventHandler.addEventListener('mousedown', () => {
  console.log('click2')
})
eventHandler.addEventListener('mousedown', () => {
  console.log('click3')
})